<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
		//创建二维数组，放入各省份所属城市
			var arr = [["唐山","秦皇岛","石家庄"],
			           ["大同","太原","运城"],
			           ["青岛","济南","烟台"]];
			//创建方法，供选择调用
			function changefn(){
				//创建的HTML
				s2.innerHTML = "<option>请选择</option>";
				//得到每个省份对应的城市数组
				var cities =(arr[s1.value]);
				//遍历数组中的每一个城市名称，并创建option元素
				for(var i=0;i<cities.length;i++){
						var opt = document.createElement("option");
						//将选择的省份相对应的城市数组放入元素中
						opt.innerText = cities[i];
						//将元素添加至标签中
						s2.appendChild(opt);
					}
			}
		</script>
	</head>
	<body>
	<!-- onchange当元素的value值发生改变时响应 -->
		<select id="s1" onchange="changefn()">
			<option>请选择</option>
			<option value="0">河北</option>
			<option value="1">山西</option>
			<option value="2">山东</option>
		</select>
		
		<select id="s2">
			<option>请选择</option>
		</select>
	</body>
</html>